import styled from 'styled-components'
import Icon from '@/components/Icon'
export interface IconAvatarProps {
	useAvatar: boolean
	hasAvatar: boolean
	isOnline: boolean
	isManager: boolean
	isPhone: boolean
	isMeeting: boolean
	isGuest?: boolean
}
export const IconAvatar = styled(Icon).attrs(
	({ useAvatar, hasAvatar, isOnline, isManager, isPhone, isMeeting, isGuest }: IconAvatarProps) => {
		if (useAvatar) {
			if (hasAvatar) {
				return { className: `no-use ${isOnline ? '' : 'offline'}` }
			} else {
				return {
					className: `${isPhone ? 'avatar-type-phone' : ''} ${isMeeting ? `avatar-type-meeting` : ''} ${
						isOnline ? '' : 'offline'
					}`,
				}
			}
		} else {
			return {
				className: `${isPhone ? 'avatar-type-phone' : ''} ${isMeeting ? `avatar-type-meeting` : ''} ${
					isOnline ? (isManager ? 'color-blue' : 'color-green') : 'offline'
				} ${isGuest ? 'avatar-guest' : ''}`,
			}
		}
	}
)<IconAvatarProps>`
	width: 24px;
	height: 24px;
	background-position: 0 -75px;
	cursor: default;
	&.no-use,
	&.no-use.offline {
		background-position: 0 5px;
	}
	&.offline {
		background-position: -48px -1319px;
	}
	&.color-blue {
		background-position: 0 -1319px;
	}
	&.color-green {
		background-position: -24px -1319px;
	}
	&.avatar-type-phone {
		background-position: -144px -75px;
	}
	&.avatar-type-phone.color-blue {
		background-position: -216px -75px;
	}
	&.avatar-type-phone.color-green {
		background-position: -240px -75px;
	}
	&.avatar-type-phone.offline {
		background-position: -264px -1319px;
	}
	&.avatar-type-meeting {
		background-position: -648px -1319px;
	}
	&.avatar-type-meeting.color-blue {
		background-position: -576px -1319px;
	}
	&.avatar-type-meeting.color-green {
		background-position: -600px -1319px;
	}
	&.avatar-type-meeting.offline {
		background-position: -624px -1319px;
	}
	&.avatar-guest,
	&.avatar-guest.color-green {
		background-position: -696px -1319px;
	}
`
export const Wrap = styled(IconAvatar)<IconAvatarProps>`
	img {
		border-radius: 50%;
		width: 24px;
		height: 24px;
	}
	&.offline img {
		opacity: 0.35;
	}
`
